<template>
	<view class="cost-detail" :style="{'margin-bottom': bottomHeight+'rpx'}">
		<view class="cost-con">
			<view class="title">费用明细</view>
			<view class="const-list">
				<view class="dt">
					<view>{{baseTitle}}</view>
					<view v-if="typeid==4"><text class="symbol">{{globalExchangeRate}}</text>{{priceInfo.price}}</view>
					<view v-if="typeid==14 || typeid==104 || typeid==201" class="total"><text class="symbol">{{globalExchangeRate}}</text>{{priceInfo.totalMoney}}</view>
				</view>
				
				<view class="subtext" v-if="typeid==104">
					{{priceInfo.start_dest}} → {{priceInfo.end_dest}} | {{priceInfo.roomInfo.name}} × {{priceInfo.roomInfo.number}} (预计房间数量)
				</view>
				<!-- 邮轮出发地目的地 -->
				
				<block v-if="priceInfo.carItem && priceInfo.carItem.length>0&&typeid==3">
					<view v-for="(item,index) in priceInfo.carItem" :key="index" class="dd">
						<view>{{item.name}}</view>
						<view>{{item.priceDetail}}</view>
					</view>
				</block>
				<block v-if="priceInfo.price && (!productInfo.need_num || productInfo.need_num=='0')">
					<block v-for="(item,index) in priceInfo.price.people" :key="index">
						<view v-if="item.num>0 && item.price > 0" class="dd">
							<view>{{item.name}}</view>
							<view v-if="typeid==104">{{globalExchangeRate}}{{item.price}}×{{item.num}}</view>
							<view v-else>{{globalExchangeRate}}{{decimalMoney(item.price)}}×{{item.num}}</view>
						</view>						
						<view v-if="item.drivernum>0 && item.driver_price > 0" class="dd">
							<view>司机</view>							
							<view>{{globalExchangeRate}}{{decimalMoney(item.driver_price)}}×{{item.drivernum}}</view>
						</view>
					</block>
					<block v-for="(item,index) in priceInfo.scenePay" :key="index">
						<view class="dd">
							<view>补差价</view>						
							<view>{{globalExchangeRate}}{{decimalMoney(item.money)}}×1</view>
						</view>						
					</block>
					
					<block v-if="typeid==104 && priceInfo.price.floors && priceInfo.price.floors.length" v-for="(item,index) in priceInfo.price.floors" :key="item.id">
						<view v-if="item.num>0 && item.price > 0" class="dd">
							<view>{{item.name}}</view>
							<view>{{globalExchangeRate}}{{decimalMoney(item.price)}}×{{item.num}}</view>
						</view>
					</block>
					<!-- 邮轮升楼层 -->

					<view class="add-pro-tit" v-if="priceInfo.price.addtionals && priceInfo.price.addtionals.length">
						<view>附加产品</view>
						<view class="price">{{globalExchangeRate}}{{priceInfo.attachMoney}}</view>
					</view>
					
					<block v-if="typeid==104 && priceInfo.price.addtionals && priceInfo.price.addtionals.length">
						<view v-for="(item,index) in priceInfo.price.addtionals" :key="index" class="dd">
							<view>{{item.name}}</view>
							<view>{{globalExchangeRate}}{{decimalMoney(item.price)}}×{{item.num}}</view>
						</view>
					</block>
					<!-- 邮轮附加产品信息 -->
					
					<view v-if="priceInfo.price.roombalance>0 && priceInfo.price.roomNum > 0" class="dd">
						<view>单房差</view>
						<view>{{globalExchangeRate}}{{decimalMoney(priceInfo.price.roombalance)}}×{{priceInfo.price.roomNum}}</view>
					</view>
				</block>
				<block v-if="productInfo.need_num=='1'">
					<view class="dd">
						<view>费用</view>							
						<view>{{globalExchangeRate}}{{decimalMoney(priceInfo.price.people.adult.price)}}×{{priceInfo.price.people.adult.num}}</view>
					</view>
					<view class="add-pro-tit" v-if="priceInfo.price.addtionals && priceInfo.price.addtionals.length">
						<view>附加产品</view>
						<view class="price">{{globalExchangeRate}}{{priceInfo.attachMoney}}</view>
					</view>
				</block>
				<block v-if="priceInfo.datePrice">
					<block v-for="(item,index) in priceInfo.datePrice" :key="index">
						<view class="dd dc">
							<view>{{item.title}}</view>
							<view>{{decimalMoney(item.price)}}×{{item.num}}</view>
						</view>
					</block>
				</block>
				<block v-if="expressFee > 0">
					<view class="dd">
						<view>运费</view>
						<view>{{globalExchangeRate}}{{decimalMoney(expressFee)}}</view>
					</view>
				</block>
				<!-- 预订页保险详情 -->
				<view v-if="insurance.id" class="dd">
					<view>{{insurance.base_title}}{{insurance.title}}</view>
					<view>{{globalExchangeRate}}{{decimalMoney(insurance.price)}}×{{totalNum}}</view>
				</view>
				
				<block v-if="insurances">
					<view v-for="(item,index) in insurances" :key="index"  class="dd">
						<view>{{item.base_title ? item.base_title : ''}}-{{item.title}}</view>
						<view>{{globalExchangeRate}}{{decimalMoney(item.price)}}×{{totalNum}}</view>
					</view>
				</block>
				
				<!-- 订单页面的保险详情 -->
				<block v-if="additional && additional.length > 0"></block>
				<view v-for="(item,index) in additional" :key="index" class="dd">
					<view>{{item.productname}}</view>
					<view>{{globalExchangeRate}}{{decimalMoney(item.price)}}×{{item.dingnum}}</view>
				</view> 
				 
			</view>
			<view class="discounts-list" v-if="discountMoney > 0">
				<view class="dt" :class="{color:titleColor}">
					<view>优惠</view>
					<view><text class="symbol">-{{globalExchangeRate}}</text>{{discountMoney}}</view>
				</view>
				<view class="dd" v-if="discountInfo.integral && discountInfo.integral.money > 0">
					<view>积分抵扣</view>
					<view>-{{globalExchangeRate}}{{decimalMoney(discountInfo.integral.money)}}</view>
				</view>
				<view class="dd" v-if="discountInfo.coupon && discountInfo.coupon.money > 0">
					<view>优惠券（{{discountInfo.coupon.name}}）</view>
					<view>-{{globalExchangeRate}}{{decimalMoney(discountInfo.coupon.money)}}</view>
				</view>
				<view class="dd" v-if="discountInfo.red_envelope && discountInfo.red_envelope.money > 0">
					<view>红包抵扣</view>
					<view>-{{globalExchangeRate}}{{decimalMoney(discountInfo.red_envelope.money)}}</view>
				</view>
				<view class="dd" v-if="discountInfo.platform && discountInfo.platform.money > 0">
					<view>平台优惠（平台管理员优惠）</view>
					<view>-{{globalExchangeRate}}{{decimalMoney(discountInfo.platform.money)}}</view>
				</view>
				<view class="dd" v-if="discountInfo.together && discountInfo.together.money > 0">
					<view>拼团优惠</view>
					<view>-{{globalExchangeRate}}{{decimalMoney(discountInfo.together.money)}}</view>
				</view>
				<view class="dd" v-if="discountInfo.seckill && discountInfo.seckill.money > 0">
					<view>秒杀优惠</view>
					<view>-{{globalExchangeRate}}{{decimalMoney(discountInfo.seckill.money)}}</view>
				</view>
				<view class="dd" v-if="discountInfo.member_discount && discountInfo.member_discount.money > 0">
					<view>会员优惠</view>
					<view>-{{globalExchangeRate}}{{decimalMoney(discountInfo.member_discount.money)}}</view>
				</view>
			</view>
			<view v-if="productInfo.paytype == 2" class="pay-type">
				订金{{globalExchangeRate}}<block>{{priceInfo.dingjin}}</block>，到店支付{{globalExchangeRate}}{{storeMoneyPay}}
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * 费用明细弹窗
	 * @property {Number} bottomHeight 弹窗与底部间距（用于有底部悬浮栏的页面）
	 * @property {Boolean} titleColor 标题是否添加颜色
	 * @property {Boolean} payType 支付方式分别支付金额显示
	 * @property {Boolean} paySum 支付总额显示
	 * @property {Number} typeid 栏目id 1-线路，2-酒店，3-景点，4-租车
	 * 
	 */
	export default {
		props: {
			bottomHeight: {
				type: Number,
				default: 0
			},
			baseTitle: { // 基础费用标题
				type: String,
				default: '基础费用'
			},
			titleColor: {
				type: Boolean,
				default: false
			},
			payType: {
				type: Boolean,
				default: false
			},
			paySum: {
				type: Boolean,
				default: false
			},
			discountInfo:{
				type:Object,
				default(){
					return {};
				}
			},
			productInfo:{
				type:Object,
				default(){
					return {};
				}
			},
			priceInfo:{
				type:Object,
				default(){
					return {};
				}
			},
			expressFee:{
				type:[Number,String],
				default:0
			},
			insurance:{ // 预订页保险详情
				type:Object,
				default(){
					return {};
				}
			},
			insurances:{ // 预订页保险数据详情
				type:Array,
				default(){
					return [];
				}
			},
			additional:{ // 订单页保险详情
				type:Array,
				default(){
					return [];
				}
			},
			totalNum:{
				type: [Number, String],
				default: 0
			},
			discountMoney:{
				type: [Number, String],
				default: 0
			},
			storeMoney:{
				type: [Number, String],
				default: 0
			},
			typeid:{
				type: [Number, String],
				default: 1
			},
			memberDiscount: {
				type: [Number, String],
				default: 0
			}
		},
		data() {
			return {
				storeMoneyPay:0
			}
		},
		watch:{
			storeMoney:{
				handler(val) {
					this.storeMoneyPay = val.toFixed(2);
				},
				immediate: true
			}
		},
		methods: {
			// 金额保留两位
			decimalMoney(val){
				return parseFloat(val).toFixed(2);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.module-block{
		padding: 0 25rpx;
		margin-bottom: 20rpx;
	}
	.cost-detail{
		overflow: hidden;
		font-family: "Arial";
		border-radius: 30rpx 30rpx 0 0;
		.cost-con{
			min-height: 400rpx;
			max-height: 800rpx;
			padding: 0 25rpx;
			background-color: #fff;
			overflow-y: auto;
			font-size: $uni-font-size-base;
		}
		.title{
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			font-size: 32rpx;
			color: #000;
			border-bottom: 1rpx solid $uni-border-color;
		}
		.discounts-list,.pay-type{
			border-top: 1rpx solid $uni-border-color;
		}
		.const-list,.discounts-list{
			padding: 23rpx 0 14rpx;
		}
		.dt,.dd{
			@extend .justifyspace;
		}
		.dt{
			margin-bottom: 17rpx;
			&.color{
				color: #FF4A50;
			}
			.total{
				font-weight: bold;
			}
		}
		.dd,.pay-type{
			color: $uni-text-color-grey;
		}
		.dd{
			line-height: 1.833;
			font-size: $uni-font-size-sm;
		}
		.dc{
			color: $uni-color-primary;
		}
		.pay-type{
			height: 83rpx;
			line-height: 83rpx;
			text-align: center;
		}
	}
	.paySum{
		padding: 30rpx 0;
		border-top: 1rpx solid $uni-border-color;
		.price{
			font-size: 36rpx;
			font-weight: bold;
		}
		.symbol{
			font-weight: 400;
			font-size: $uni-font-size-mini;
		}
	}
	.subtext{
		padding-bottom: 20rpx;
		font-size: 26rpx
	}
	.add-pro-tit{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 36rpx 0 20rpx;
		.price{
			font-weight: bold;
		}
	}
</style>
